<template>
  <div class="content">
    <div class="tj_title">随机推荐</div>
    <el-row :gutter="10">
      <el-col v-for="item in random" :key="item.id"
              :xs="24" :sm="12" :md="12" :lg="8" :xl="6"
              :data-id="item.id"
              @click="toDetail"
      >
        <div class="grid-content ">
          <el-image
              style="flex:1;width: 100px; height: 100px"
              :lazy="true"
              :src="item.bookCover"
              fit="contain"
          ></el-image>
          <div class="b_title">
            <div style="font-size: 18px;font-weight: 500;padding-bottom: 4px">
              {{ item.bookName }}
            </div>
            <div class="b_desc" style=" ">
              {{ item.bookIntroduction }}
            </div>
            <div style="font-size: 16px;padding-top: 5px">
              {{ item.bookAuthor }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

  <div class="content" v-for="item in categories" :key="item.id">
    <div class="tj_title">{{ item.name }}</div>
    <el-row :gutter="10">
      <el-col v-for="item1 in item.list" :key="item1.id"
              :xs="24" :sm="12" :md="12" :lg="8" :xl="6"
              :data-id="item1.id"
              @click="toDetail"
      >
        <div class="grid-content ">
          <el-image
              style="flex:1;width: 100px; height: 100px"
              :src="item1.bookCover"
              fit="contain"
          ></el-image>
          <div class="b_title">
            <div style="font-size: 18px;font-weight: 500;padding-bottom: 4px">
              {{ item1.bookName }}
            </div>
            <div class="b_desc" style=" ">
              {{ item1.bookIntroduction }}
            </div>
            <div style="font-size: 16px;padding-top: 5px">
              {{ item1.bookAuthor }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import {get} from '../../request/request'
import {categories, random} from '../../request/api'

export default {
  name: "Index",
  components: {},
  data() {
    return {
      id: this.$store.state.user.id,
      login: this.$store.state.user.status,
      books: [],
      categories: [],
      random: [],
    }
  },
  computed: {},
  created() {
    this.getCategories()
    this.getRandom()
  },
  methods: {
    getCategories() {
      get(categories).then(res => {
        this.$data.categories = res.data
        this.getList(res.data)
      })
    },
    getList(list) {
      for (let i = 0; i < list.length; i++) {
        get(random + '/' + list[i].id).then(res => {
          this.$data.categories[i]['list'] = res.data
        })
      }
    },
    getRandom() {
      get(random).then(res => {
        this.$data.random = res.data
      })
    },
    toDetail(e) {
      const id = e.currentTarget.dataset.id
      this.$router.push("/detail/" + id)
    },
  },

}

</script>

<style scoped>
.content {
  width: 100%;
}

.tj_title {
  border: 1px solid #eeeeee;
  border-radius: 2px;
  padding: 8px 3px;
  align-items: center;
  letter-spacing: 2px;
}

.el-row {
  border-radius: 4px;
  padding-bottom: 20px;
}

.el-col {
  padding-top: 2px;
  padding-bottom: 10px;
}

.grid-content {
  padding: 5px 2px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  align-items: center;
  display: flex;
  min-height: 100px;
}

.b_title {
  display: flex;
  flex: 2;
  flex-direction: column;
  padding-left: 5px;
}

.b_desc {
  display: inline;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 14px;
}

</style>
